<template>
    <div>
        <canvas id="clockCanvas" :width="dynamicStyles.width" :height="dynamicStyles.height"></canvas>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import OnEvent from '../common/OnEvent'

export default {
    extends: OnEvent,
    props: {
        propValue: {
            type: Object,
            required: true,
            default: {},
        },
        element: {
            type: Object,
            default: () => { },
        },
    },
    data() {
        return {
            canEdit: false,
            ctrlKey: 17,
            isCtrlDown: false,
            cancelRequest: null,
            clockInterval: null,
            dynamicStyles: {
                width: 0,
                height: 0,
                borderRadius: '0px',
                fontSize: "0"
            }
        }
    },
    computed: {
        ...mapState([
            'editMode',
            'curComponent',
        ]),
    },
    created() {
        this.getTime()
    },
    watch: {
        'element.style.width': function () {
            const { width, height } = this.element.style
            this.dynamicStyles.width = width
            this.dynamicStyles.height = height
            this.dynamicStyles.borderRadius = this.propValue.border + 'px'
            this.drawClock()
        },
        'element.style.height': function () {
            const { width, height } = this.element.style
            this.dynamicStyles.width = width
            this.dynamicStyles.height = height
            this.dynamicStyles.borderRadius = this.propValue.border + 'px'
            this.drawClock()
        },
        "propValue.fontSize": function () {
            this.dynamicStyles.fontSize = this.propValue.fontSize + 'px'
        },
    },
    mounted() {
        const { width, height } = this.element.style
        this.dynamicStyles.width = width
        this.dynamicStyles.height = height
        this.dynamicStyles.fontSize = this.propValue.fontSize + 'px'
        this.$nextTick(() => {
            this.drawClock();
            this.startClock();
        });
    },
    destroyed () {
        // 停止定时器
        if (this.clockInterval) {
                clearInterval(this.clockInterval);
                this.clockInterval = null; // 清空定时器ID
            }
    },
    methods: {
        getTime() {
            const currentTime = new Date();
            const hours = String(currentTime.getHours()).padStart(2, '0');
            const minutes = String(currentTime.getMinutes()).padStart(2, '0');
            const seconds = String(currentTime.getSeconds()).padStart(2, '0');
            this.propValue.time = hours + ":" + minutes + ":" + seconds;

        },
        drawClock() {
            const canvas = document.getElementById('clockCanvas');
            const ctx = canvas.getContext('2d');
            const radius = Math.min(canvas.width, canvas.height) / 2;

            // 清除画布并重新设置原点到中心
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();  // 保存当前状态
            ctx.translate(radius, radius); // 将坐标原点移动到画布中心

            this.drawFace(ctx, radius);
            this.drawNumbers(ctx, radius);
            this.drawTime(ctx, radius);

            ctx.restore(); // 恢复保存的状态，将原点还原为左上角
        },
        drawFace(ctx, radius) {
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();

            ctx.strokeStyle = '#333';
            ctx.lineWidth = radius * 0.1;
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.05, 0, 2 * Math.PI);
            ctx.fillStyle = '#333';
            ctx.fill();
        },
        drawNumbers(ctx, radius) {
            ctx.font = radius * 0.15 + 'px Arial';
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'center';
            for (let num = 1; num <= 12; num++) {
                const ang = (num * Math.PI) / 6;
                ctx.rotate(ang);
                ctx.translate(0, -radius * 0.85);
                ctx.rotate(-ang);
                ctx.fillText(num.toString(), 0, 0);
                ctx.rotate(ang);
                ctx.translate(0, radius * 0.85);
                ctx.rotate(-ang);
            }
        },
        drawTime(ctx, radius) {
            const now = new Date();
            const hour = now.getHours();
            const minute = now.getMinutes();
            const second = now.getSeconds();

            // Hour hand
            let hourAngle = ((hour % 12) * Math.PI) / 6 + (minute * Math.PI) / 360;
            this.drawHand(ctx, hourAngle, radius * 0.5, radius * 0.07);

            // Minute hand
            let minuteAngle = (minute * Math.PI) / 30 + (second * Math.PI) / 1800;
            this.drawHand(ctx, minuteAngle, radius * 0.8, radius * 0.07);

            // Second hand
            let secondAngle = (second * Math.PI) / 30;
            this.drawHand(ctx, secondAngle, radius * 0.9, radius * 0.02, 'red');
        },
        drawHand(ctx, pos, length, width, color = '#333') {
            ctx.beginPath();
            ctx.lineWidth = width;
            ctx.lineCap = 'round';
            ctx.strokeStyle = color;
            ctx.moveTo(0, 0);
            ctx.rotate(pos);
            ctx.lineTo(0, -length);
            ctx.stroke();
            ctx.rotate(-pos);
        },
        startClock() {
            var that = this
            this.clockInterval = setInterval(() => {
                that.drawClock()
            }, 1000);
        }
    },
}
</script>

<style lang="scss" scoped>
.v-text {
    width: 100%;
    height: 100%;
    display: table;

    div {
        display: table-cell;
        width: 100%;
        height: 100%;
        outline: none;
        word-break: break-all;
        padding: 4px;
    }

    .can-edit {
        cursor: text;
        height: 100%;
    }
}

.preview {
    user-select: none;
}

#clockCanvas {
    // background-color: #f0f0f0;
    display: block;
    // margin: 20px auto;
    // border: 1px solid #333;
    border-radius: 50%;
}
</style>
